<template>
  <!-- 开通vip详情页面 -->
  <view>
    <view class="tianshu">
      <view class="tian-box" :class="iscolor =='1'?'active':''" @click="yueshu(1)">30天 </view>
      <view class="tian-box" :class="iscolor  =='2'?'active':''" @click="yueshu(2)">60天 </view>
      <view class="tian-box" :class="iscolor  =='3'?'active':''" @click="yueshu(3)">90天 </view>
    </view>
    <view class="money">
      x{{money}}
    </view>
    <u-field class="lablecolor" type="password" v-model="zfpwd" label="密码" placeholder="请填写支付密码" :border-bottom="false"></u-field>
    <u-field class="lablecolor" v-model="bu" label="BU抵扣" placeholder="请填写抵扣金额" :border-bottom="false"></u-field>
    <button class="btns" type="primary" @click="baocun">保存</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        iscolor: 1,
        yue: 1, // 开通vip的月数
        money: '', // 每月多少钱
        zfpwd: '', // 支付密码
        bu: ''
      }
    },
    onLoad() {
      this.vipmoney()
    },
    methods: {
      // 获取每月的vip钱数
      async vipmoney() {
        const {
          data: res
        } = await this.$myHttp({
          method: 'POST',
          url: 'shows/index/vipjine'
        })
        if (res.code == 200) {
          this.money = res.data
        }
      },
      // 开通vip
      async baocun() {
        const {
          data: res
        } = await this.$myHttp({
          method: 'POST',
          url: 'shows/index/expiration',
          data: {
            uid: uni.getStorageSync('uid'),
            token: uni.getStorageSync('token'),
            yue: this.yue,
            money: this.money,
            zfpwd: this.zfpwd,
            bu: this.bu
          }
        })
        if (res.code == 200) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      },
      // 选择天数
      yueshu(type) {
        this.iscolor =type
        this.yue=type
      }
    }
  }
</script>

<style>
  page {
    background-color: #131a2a;
    color: #FFFFFF;
    padding: 60rpx 40rpx;
  }

  .lablecolor {
    color: #FFFFFF;
  }

  .btns {
    width: 90%;
    margin: 100rpx 5% 0;
  }

  .money {
    margin-left: 28rpx;
  }

  .tianshu {
    display: flex;
    justify-content: space-around;
    margin-bottom: 40rpx;
  }

  .tian-box {
    color: #007AFF;
    width: 20%;
    height: 100rpx;
    line-height: 100rpx;
    border-radius: 10rpx;
    text-align: center;
    border: 1px solid #007AFF;
  }

  .active {
    color: #FFFFFF;
    background-color: #007AFF;
  }
</style>
